<template>
    <section
      :class="[item.msgType, 'msg-item']"
      :style="{top: top + 'px'}"
    >
      <svg class="icon" aria-hidden="true">
        <use :xlink:href="getValue(item.msgType)"></use>
      </svg>
      <span> {{item.message}} </span>
    </section>
</template>

<script>

export default {
  name: "DialogMessage",
  props: ["item","idx"],
  data() {
      return {
          top: 0
      }
  },
  methods: {
    getValue(msgType) {
      let value = "#icon-xinxi-xianxingyuankuang";
      switch (msgType) {
        case "error":
          value = "#icon-cuowu";
          break;
        case "warning":
          value = "#icon-jinggao";
          break;
        case "success":
          value = "#icon-zhengque1";
          break;
      }
      return value;
    },
  },
  watch: {
      idx: {
        // 立即监听：属性值初识改变的时候也会被监听
        immediate: true,
        handler(newVal,oldVal) {
            this.top = newVal * 45;
            // 只有第一次侦听
            if (null == oldVal) {
                let time = 0;
                let id = setInterval(() => {
                    this.top += 2;
                    time += 5;
                    if (time == 1500) {
                        clearInterval(id);
                    }
                },5)
            }
        }
      }
  }
  
};
</script>
<style scoped>

.msg-item {
  border-radius: 2px;
  padding: 10px;
  margin-top: 15px;
  position: absolute;
  width: 380px;
  z-index: 150;
  left: 50%;
  transform: translate(-50%, 0);
}

.msg-item > span {
  padding-left: 10px;
}

.message {
  background-color: #f4f4f5;
  color: #909399;
}

.warning {
  background-color: #fdf6ec;
  color: #e6a23c;
}

.success {
  background-color: #f0f9eb;
  color: #67c23a;
}

.error {
  background-color: #fef0f0;
  color: #f86c82;
}
</style>
